<div class="well table-search">
    <form class="form-horizontal">
        <div class="form-group col-sm-4">
            <label class="col-sm-2 control-label"> 名称 </label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="key" />
            </div>
        </div>
        <div class="form-group col-sm-4">
            <label class="col-sm-2 control-label"> 状态 </label>
            <div class="col-sm-10">
                <select id="status" class="form-control">
                    <option value="">--不限--</option>
                    <option value="1">启用</option>
                    <option value="2">禁用</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <button class="btn btn-success btn-sm" onclick="refreshTable()"><i class="fa fa-search"></i> 搜索</button>
            <button class="btn btn-sm"><i class="fa fa-undo"></i> 重置</button>
        </div>
    </form>
</div>
<div id="toolbar">
    <a class="btn btn-info btn-white" onclick="addItem()"><i class="ace-icon fa fa-plus"></i>新增</a>
</div>
<table id="list-container"></table>
<?php $this->beginBlock('js') ?>
<script type="text/javascript">
    var urls = {
        index: 'index',
        disable: 'disable',
        enable: 'enable',
        add: 'add',
        edit: 'edit',
        assignMenu: 'assign-menu'
    }
    initTable()
    function refreshTable() {
        var querys = {
            id: $('#id').val(),
            title: $('#title').val(),
            status: $('#status').val()
        }
        $('#list-container').bootstrapTable('refresh', {
            query: querys
        });
    }
    function disable(id) {
        $.get(urls.us, {id: id, status: 2}, function(response){
            if (res) {
                ace.alert.ok(res.msg, function(){
                    refreshTable()
                })
            }else{
                ace.alert.err(res.msg)
            }
        }, 'json')
    }
    function enable(id) {
        $.get(urls.enable, {id: id}, function(res){
            if (res) {
                ace.alert.ok(res.msg, function(){
                    refreshTable()
                })
            }else{
                ace.alert.err(res.msg)
            }
        }, 'json')
    }
    function remove(id) {
        layer.confirm('确定要删除吗？', {icon: 3}, function(){
            $.get(urls.remove, {id: id, status: -1}, function(response){
                if (response) {
                    layer.msg('删除成功', {icon: 1}, function(){
                        refreshTable()
                    });
                }else{
                    layer.msg('删除失败', {icon: 2});
                }
            })
        })
    }
    function initTable () {
        var t = $('#list-container');
        t.bootstrapTable('destroy');
        var columns = [
            {title: 'ID', field: 'id'},
            {title: '名称', field: 'name'},
            {title: '备注', field: 'remark'},
            {title: '状态', field: 'status', formatter: function(value, row, index){
                    if (value == 1)
                        return '<span class="badge badge-success">启用</span>'
                    else
                        return '<span class="badge badge-grey">禁用</span>'
                }},
            {title: '最后修改时间', field: 'updated_at'},
            {title: '操作', cellStyle: {
                    css: {'max-width': '240px'},
                },class: 'actions', formatter: function(value, row, index) {
                    var html = '';
                    if (row.status==1) {
                        html += '<a onclick="disable('+row.id+')">禁用</a>'
                    } else {
                        html += '<a onclick="enable('+row.id+')">启用</a>'
                    }
                    html += '<a onclick="editItem('+row.id+')">编辑</a>';
                    html += '<a onclick="remove('+row.id+')" >删除</a>';
                    html += '<a onclick="assignMenu('+row.id+')" >分配权限</a>';
                    return html;
                }}
        ]
        t.bootstrapTable({
            url: urls.index,
            uniqueId: "id",
            striped: true,
            toolbar: '#toolbar',
            pagination: true,
            sidePagination: "server",
            pageSize: 20,
            pageList: [10, 20, 50, 100],
            columns: columns,
            queryParams: function (params){
                return {
                    limit: params.limit,
                    offset: params.offset,
                    name: $('#name').val(),
                    status: $('#status').val()
                }
            }
        });
    }
    function setInstallment(id) {
        var row = $('#list-container').bootstrapTable('getRowByUniqueId', id)
        $('#setInstallmentModal input[name=id]').val(row.id)
        $('#setInstallmentModal .name').val(row.brand + '(' + row.series + ') ' + row.model)
        $('#setInstallmentModal input[name=status]').attr('checked', row.installment_status == 1)
        $('#setInstallmentModal input[name=first_total]').val(row.installment_first_total/1000000)
        $('#setInstallmentModal input[name=month_total]').val(row.installment_month_total/100)
        $('#setInstallmentModal input[name=month_count]').val(row.installment_month_count)
        $('#setInstallmentModal').modal('show')
    }
    function setTag(id) {
        var row = $('#list-container').bootstrapTable('getRowByUniqueId', id)
        $('#setTagModal input[name=id]').val(row.id)
        $('#setInstallmentModal .name').val(row.brand + '(' + row.series + ') ' + row.model)
        $("#setTagModal input[name='tag[]']").each(function() {
            if ($.inArray($(this).val(), row.tags) > -1) {
                $(this).prop('checked', true)
            }
        })
        $('#setInstallmentModal').modal('show')
    }
    $.validator.addMethod("money", function(value, element) {
        return this.optional(element) || /^((0\.0[1-9])|(0\.[1-9]\d?)|([1-9]\d*\.\d{1,2})|([1-9]\d*))$/.test(value);
    }, "必须输入合法的金额，最多保留两位小数");
    var validateOptions = {
        rules: {
            first_total: {required: {
                    depends: function(ele) {
                        return $('#setInstallmentForm input[name=status]').is(':checked')
                    }
                }, money: true},
            month_total: {required: {
                    depends: function(ele) {
                        return $('#setInstallmentForm input[name=status]').is(':checked')
                    }
                }, money: true},
            month_count: {required: {
                    depends: function(ele) {
                        return $('#setInstallmentForm input[name=status]').is(':checked')
                    }
                }, max: 60, min: 12},
        },
        messages: {},
        submitHandler: function (form) {
            $(form).ajaxSubmit({
                dataType : "json",
                success: function(response) {
                    if (response.code==0) {
                        layer.msg('保存成功', {icon: 1}, function(){
                            $('#setInstallmentModal').modal('hide')
                            refreshTable()
                        });
                    }else{
                        layer.msg(response.msg, {icon: 2});
                    }
                },
                error: function(xhr, status, error) {
                    if(status==='error'){
                        layer.msg('服务器错误', {icon: 2});
                    }
                }
            });
        }
    }

    function addItem(pid) {
        $.get(urls.add, {pid: pid}, function(res) {
            $('body').append(res)
            $('#itemFormModal').modal('show')
        })
    }
    function editItem(id) {
        $.get(urls.edit, {id: id}, function(res) {
            $('body').append(res)
            $('#itemFormModal').modal('show')
        })
    }

    function assignMenu(id) {
        $.get(urls.assignMenu, {id: id}, function(res) {
            $('body').append(res)
            $('#assignMenuFormModal').modal('show')
        })
    }
</script>
<?php $this->endBlock() ?>
